<#assign basePath=site.url>
<#include "header.html">
<style type="text/css">
body {
	background-image: url("${basePath}img/bgg.jpg");
}

.mt1{
margin-top: 1px;
}
.mb1{
margin-bottom: 2px;
}
.diwenben{
background-image: url("${basePath}img/diwenben.png");
}
.dibiaoti{
background-image: url("${basePath}img/dibiaoti.png");
}
.headdiv {
    background-image: url("${basePath}img/dibiaoti.png");
	border-bottom-color: #60605f;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-top-color: #60605f;
	border-top-width: 2px;
	border-top-style: solid;
}



.head {
	background-image: url("${basePath}img/shuhua_biaoti00.png");
	background-repeat: no-repeat;
}

.headmore {
	background-image: url("${basePath}img/shuhua_more_00.png");
	background-repeat: no-repeat;
}

.nav {
	margin: 0px;
	margin-top: -3px;
	padding: 0px;
	width: 940px;
	height: 99px;
	clear: both;
	background-image: url("${basePath}img/shuhua_bg_00.png");
	background-repeat: no-repeat;
	padding: 0px;
}

.none {
	margin: 0px;
	padding: 0px;
	background-color: red;
}

.nav li {
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.content {
	background-image: url("${basePath}img/shuhua_bg_00.png");
	width: 906px;
	clear: both;
	padding-left: 17px;
	padding-right: 17px;
	position: relative;
}

.content1 {
	width: 611px;
	height: 651px;
	float: left;
	background-image: inherit;
}

.content1_1 {
	width: 611px;
	height: 372px;
	float: left;
}

.content1_2 {
	width: 302px;
	float: left;
	margin-top: 10px;
	height: 260px;
}

.content1_3 {
	margin-left: 5px;
	margin-top: 10px;
	width: 302px;
	height: 260px;
	float: left;
	background-image: url("${basePath}img/di02.jpg");
}

.content1content {
	background-image: url("${basePath}img/di02.jpg");
	height: 453px;
	clear: both;
	padding-top: 0px;
	font-size: 11px;
}

.border-tb {
	border-top-color: #bcbd9d;
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom-color: #bcbd9d;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.borderdiv {
	background-color: #bcbd9d;
	height: 2px;
}

.aa {
	opacity: 0.10;
	-moz-opacity: 0.10;
	filter: alpha(opacity = 10);
	background: #1d1e22;
}

.content1content ul {
	color: #000000;
	font-size: 13px;
	margin: 0px;
}

.spanleft {
	float: left;
}

.spanright {
	float: right;
}

.content2 {
	width: 278px;
	height: 495px;
	float: left;
	background-image: inherit;
	margin-left: 17px;
}

.content2_1 {
	margin-top: 20px;
	clear: both;
	position: relative;
}

.content2_1_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 288px;
}

.content2_2 {
	clear: both;
	position: relative;
	margin-top: 5px;
}

.content2_2_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 122px;
}

.content2_3 {
	margin-top: 5px;
	clear: both;
	position: relative;
}

.content2_3_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 113px;
}

.content2content1 span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 180px;
	height: 100px;
}

.center {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	clear: both;
	text-align: center;
}

.hezuo {
	margin-top: 0px;
	clear: both;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 906px;
}

.hezuohead {
	background-image: url("${basePath}img/hezuobg.jpg");
	background-repeat: no-repeat;
	height: 29px;
	width: 906px;
}

.hezuoheadtext1 {
	color: white;
	float: left;
	margin-left: 25px;
	margin-top: 5px;
	font-size: 13px;
}

.hezuocentent {
	background-image: url("${basePath}img/di02.jpg");
	clear: both;
	height: 83px;
	width: 924px;
	padding-top: 15px;
}

.nav {
	margin: 0px;
	margin-top: -3px;
	padding: 0px;
	width: 940px;
	height: 99px;
	clear: both;
	background-image: url("${basePath}img/nav02.png");
	background-repeat: no-repeat;
	padding: 0px;
}

.none {
	margin: 0px;
	padding: 0px;
	background-color: red;
}

.nav li {
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.nav1 {
	margin-left: 43px;
}

img {
	border: none;
}

ul {
	margin-left: 5px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

ul li {
	list-style: none;
	clear: both;
	padding: 2px;
}

.foot {
	background-image: url("${basePath}img/foot_bg.jpg");
	width: 940px;
	height: 116px;
	margin-left: 0px;
}

.bg2 {
	background-image: url("${basePath}img/di02.jpg");
}

.ps {
	background-image: url("${basePath}img/paimai_ps.png");
}
.border{

border-color: #ff7b7b;
border-style: solid;
border-width: 2px;
}
.borderold{

border-color: #2e2e2e;
border-style: solid;
border-width: 2px;
}
</style>
<link href="${basePath}css/site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var last=1;
var index=0;
var max=7;
$(document).ready(function(){
	
	$(".smimg").click(function(img) {
		//  alert();
		$("#showimg").attr("src", $(img.target).attr("src"));
		$("#txtdiv").text($(img.target).attr("txt"));
		$("#urlid").attr("href",$(img.target).attr("urlid"));
		$("#showimg").hide();
		$("#showimg").slideDown();
		$(".smimg").removeClass("border");
		$(".smimg").addClass("borderold");
		$(img.target).removeClass("borderold");
		$(img.target).addClass("border");
		if (last != 1) {
			$(last).removeClass("border");
			$(last).addClass("borderold");
		}
		last = img.target;
		var ids = $(img.target).attr("id");
		
		
		ids = ids.substring(1);
		index = parseInt(ids);

	});
	max = $(".smimg").length - 1;
	$("#pre").click(function(img) {
		index--;
		if (index < 0) {
			index = max;
		}
		var id = "#m" + index;
		$("#showimg").attr("src", $(id).attr("src"));
		$("#urlid").attr("href",$(id).attr("urlid"));
		$("#txtdiv").text($(id).attr("txt"));
		$("#showimg").hide();
		$("#showimg").slideDown();
		$(".smimg").removeClass("border");
		$(".smimg").addClass("borderold");
		$(id).removeClass("borderold");
		$(id).addClass("border");
		if (last != 1) {
			$(last).removeClass("border");
			$(last).addClass("borderold");
		}
		last = $(id);

	});

	$("#next").click(function(img) {
		index++;
		if (index > max) {
			index = 0;
		}
		var id = "#m" + index;
		$("#showimg").attr("src", $(id).attr("src"));
		$("#txtdiv").text($(id).attr("txt"));
		$("#urlid").attr("href",$(id).attr("urlid"));

		
		$("#showimg").hide();
		$("#showimg").fadeIn();
		$(".smimg").removeClass("border");
		$(".smimg").addClass("borderold");
		$(id).removeClass("borderold");
		$(id).addClass("border");
		if (last != 1) {
			$(last).removeClass("border");
			$(last).addClass("borderold");
		}
		last = $(id);
	});
	
	
	$("#divimg").mouseover(function(){
		$("#pre").show();
		$("#next").show();
	});
	$("#divimg").mouseout(function(){
				
		$("#pre").hide();
		$("#next").hide();	
	});
	$("#pre").hide();
	$("#next").hide();	
	$("#txtdiv").text($("#m0").attr("txt"));
	$("#urlid").attr("href",$("#m0").attr("urlid"));
	$("#showimg").attr("src", $("#m0").attr("src"));
});


</script>
</head>
<body>
	<#include "../include/headimg.html"> <#include "nav_拍卖.html">
	<div class="content">
		<div id="divimg" style="position: relative; height: 385px;margin-left: 50px;">
			<div class="ps"
				style="width: 803px; height: 385px; position: absolute;">
				
				
		   </div>
		    <a href="#" id="urlid">
		   <img id="showimg" style="z-index:50;left:108px; width: 582px;margin-left:2px;margin-top:2px; height: 279px; position: absolute;" alt="" src="${basePath}img/demo.jpg">
            </a>
		   <img style="z-index:100;left:108px; width: 586px; height: 333px; position: absolute;" alt="" src="${basePath}img/paimai_ps_top.png">
		
		<div style="background-image:none; padding-left:75px;  z-index:160;left:112px;top:281px; width: 526px; height: 50px; position: absolute;">
		   	<@cms_content_list count='8' channelId="42" titLen='15' orderBy='9' channelOption='1'>
			<#list tag_list as a>
		    <#if a_index==0>
		     <img  id="m${a_index}" urlid="${a.url}" txt="<@text_cut s=a.title len=titLen append=append/>" class="navimg smimg border"   style="width: 50px;height: 23px;margin-top: 13px;float: left;display: block;" alt="" src="${a.typeImg!site.defImg}">
		     <#else>
		     <img id="m${a_index}" urlid="${a.url}" txt="<@text_cut s=a.title len=titLen append=append/>" class="navimg smimg borderold"   style="width: 50px;height: 23px;margin-top: 13px;float: left;display: block;" alt="" src="${a.typeImg!site.defImg}">
		    </#if>
		   </#list>
		   </@cms_content_list>
		  </div>
		  <div style="background-color:#2e2e2e;background-image:none; padding-left:60px;  z-index:60;left:108px;top:281px; width: 526px; height: 50px; position: absolute;"></div>
		  <img id="pre"  style="position: absolute;width: 48px;height:52px;margin-top: 13px;z-index:200;top: 143px;left:123px;" alt="" src="${basePath}img/paimai_left.png">
		  <img id="next"  style="position: absolute;width:48px;height: 52px;margin-top: 13px;z-index:201;;top: 143px;left:630px;" alt="" src="${basePath}img/paimai_right.png">
		  
		</div>
		<div style="position: relative; height: 261px;" >
			<div  style="float: left; width: 443px; height: 261px;">
				<div class="headdiv" style="width: 443px; height: 31px;">
					<div class="head">近期拍卖</div>
					<div class="headmore">更多</div>
				</div>
				<div class="clear"></div>
				<div style="width: 443px; height: 230px;" class="diwenben">
				
				<ul>
								<@cms_content_list count='10' channelId="1" titLen='24' orderBy='0' channelOption='1'>
						         <#list tag_list as a>
								<li><a href="${a.url}"><span class="spanleft"><@text_cut s=a.title len=titLen append=append/></span><span class="spanright">[${a.date?string('yyyy-MM-dd')}]</span></a></li> </#list>
							 </@cms_content_list>
				</ul>
				
				</div>
			</div>
			<div  
				style="float: left; width: 443px; height: 261px; margin-left: 17px;">
				<div class="headdiv" style="width: 443px; height: 31px;">
					<div class="head">成交信息</div>
					<div class="headmore">更多</div>
				</div>
				<div class="clear"></div>
				<div style="width: 443px; height: 230px;" class="diwenben">
				<ul>
								<@cms_content_list count='10' channelId="1" titLen='24' orderBy='9' channelOption='1'>
						         <#list tag_list as a>
								<li><a href="${a.url}"><span class="spanleft"><@text_cut s=a.title len=titLen append=append/></span><span class="spanright">[${a.date?string('yyyy-MM-dd')}]</span></a></li> </#list>
							 </@cms_content_list>
				</ul>				
				
				</div>
			</div>
		</div>
	</div>
	<div class="clear" ></div>
	<#include "foot.html">

</body>
</html>